<template>
  <div class="page_album">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul class="com">
        <li v-for="item in list" :key="item.trackid">
           <a
          :href="`#${item.url}`"
          >
            <sound-item
              :trackid="item.trackid"
              :img="item.img"
              :title="item.title"
              :play="item.play"
              :duration="item.duration"
              :nickname="item.nickname"
              :url="item.url"
            ></sound-item>
          </a>
        </li>
      </ul>
      <template #loading>
        <div class="loading">
          <van-loading color="#ff1e00" type="spinner" />
         
          
        </div>
      </template>
    </van-list>

    <my-footer v-if="list.length"></my-footer>
  </div>
</template>

<script>
import SoundItem from "@/views/search/searchcomp/SoundItem.vue";
import { initAllSearchData } from "@/request/api.js";

import { mapState } from 'vuex'
export default {
  name: "PageAlbum",
  computed:{
    ...mapState(['condition','fq']),
    // ...mapState([])
  },
  data() {
    return {
      list: [],
      page: 1,
      rows: 20,
      category_id: "",
      // condition: "relation",
      paidFilter: false,
      // fq: "is_paid:false",
      paidFilter:true,
      loading: false,
      finished: false,
    };
  },
  components: {
 
    SoundItem,
  },
  props: {
    kw: {
      type: String,
    },
  },
  created() {
    this.initData();
  },
  watch:{
    condition(){
      this.list = []
      this.page = 1
      this.loading = true
      this.initData()
    },
    fq(){
      this.list = []
      this.page = 1
       this.loading = true
      this.initData()
    }
  },
  methods: {
    async initData() {
      let params = {
        kw: this.kw,
        core: "track",
        page: this.page,
        rows: this.rows,
       condition:this.condition,
        paidFilter:this.paidFilter,
        fq:this.fq
      };
      let { data: res } = await initAllSearchData(params);
      console.log("声音", res);
      let list = [];
      res.data.trackViews.tracks.forEach((item) => {
        let obj = {
          trackid: item.trackInfo.id,
          img: item.trackInfo.cover_path,
          title: item.trackInfo.title,
          play: item.trackInfo.count_play,
          duration: item.trackInfo.duration,
          nickname: item.trackInfo.nickname,
          url:item.pageUriInfo.url
        };
        list.push(obj);
      });

      this.list.push(...list);

      this.loading = false;

      if (list.length == 0) {
        this.finished = true;
      }
    },

    onLoad() {
      this.page++;
      this.initData();
    },
  },
};
</script>

<style lang="scss" scoped>
.com {
  li {
    padding-left: 15px;
    a {
      display: block;
      border-bottom: 1px solid #e8e8ee;
    }
  }
}
</style>

